import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  message,
  Popconfirm,
} from 'antd';

import Config from '../../../config/web.config'

import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';

import logo from '../../assets/icon.png';

// import { Link } from 'react-router-dom';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const { Search, TextArea } = Input;

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './NewsList.less';

import { getValueWithLocalStorage } from '@/utils/authority';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const namespace = 'news';
const userInfo = getValueWithLocalStorage('userinfo');
import router from 'umi/router';

import config from '../../../config/web.config'


const mapStateToProps = state => {
  const newsList = state[namespace].newsList;
  const total = state[namespace].total;
  const isLoading = state[namespace].isLoading;

  return {
    newsList,
    total,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getNewsDetails: (_state, _page, _pagesize, _insertTime, _owner) => {
      const action = {
        type: `${namespace}/getNewsDetails`,
        payload: {
          state: _state,
          page: _page,
          pagesize: _pagesize,
          insertTime: _insertTime,
          owner: _owner,
        },
      };
      dispatch(action);
    },
    pubnishActivityOnline: (id, newState, _owner) => {
      const action = {
        type: `${namespace}/pubnishActivityOnline`,
        payload: {
          id: id,
          newState: newState,
          owner: _owner,
        },
      };
      dispatch(action);
    },
    delNewsDetail: (id, _owner) => {
      const action = {
        type: `${namespace}/delNewsDetail`,
        payload: {
          id: id,
          owner: _owner,
        },
      };
      dispatch(action);
    },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class NewsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: '-1', //维修状态:0维修中 1待结账 2已完成 3已取消
      page: '0',
      pagesize: '20',
      insertTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      owner: userInfo.tel,
    };
  }

  componentDidMount() {
    config.loadlCNZZ()
    this.reloadData();
  }

  reloadData = () => {
    this.props.getNewsDetails(
      this.state.state,
      this.state.page,
      this.state.pagesize,
      this.state.insertTime,
      this.state.owner
    );
  };

  render() {
    const columns = [
      {
        title: '新闻分类',
        dataIndex: 'categoryname',
        render: (text, record) => (
          <div>
            <span>{record.category.name}</span>
          </div>
        ),
      },
      {
        title: '新闻标题',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '新闻简介',
        dataIndex: 'desc',
        key: 'desc',
      },
      {
        title: '发布时间',
        dataIndex: 'inserttime',
        key: 'inserttime',
        render: (text, record) => (
          <div>
            <span>{record.inserttime}</span>
          </div>
        ),
      },
      {
        title: '新闻图片',
        dataIndex: 'picurl',
        key: 'picurl',
        render: (text, record) => (
          <img className={styles.hpicStyle} src={record.picurl == undefined ?'':record.picurl.url} alert="活动图片" />
        ),
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        render: (text, record) => (
          <Route>
            <span>
              <a
                href={
                  Config.HttpUrl+'/activity/detail?id=' +
                  record._id +
                  '&name=' +
                  userInfo.shopname +
                  '&adv=' +
                  userInfo.advtip
                }
                target="view_window"
              >
                预览
              </a>
              <Divider type="vertical" />
              <Link to={{ pathname: '/news/addtemplate', query: { id: record._id } }}>编辑</Link>
              <Divider type="vertical" />
              <Popconfirm
                title="确认删除此活动?"
                onConfirm={() => {
                  this.props.delNewsDetail(record._id, userInfo.tel);
                }}
                okText="确认"
                cancelText="取消"
              >
                <a href="#" className={styles.delBtnStyle}>
                  删除
                </a>
              </Popconfirm>
              <Divider type="vertical" />
              <Button
                type={record.isonline == '0' ? 'primary' : 'danger'}
                onClick={() => {
                  message.info('最多只能有一个活动上线');
                  this.props.pubnishActivityOnline(
                    record._id,
                    record.isonline == '1' ? '0' : '1',
                    userInfo.tel
                  );
                }}
              >
                {record.isonline == '1' ? '下线' : '上线'}
              </Button>
            </span>
          </Route>
        ),
      },
    ];

    const dateFormat = 'YYYY-MM-DD';

    var that = this;

    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup
          defaultValue={'-1'}
          onChange={e => {
            if (e.target.value == '-1') {
            } else if (e.target.value == '0') {
            } else if (e.target.value == '1') {
            } else if (e.target.value == '2') {
            } else if (e.target.value == '3') {
            } else if (e.target.value == '4') {
            }

            that.setState({ state: e.target.value }, () => {
              that.reloadData();
            });
          }}
        >
          <RadioButton value="-1">全部</RadioButton>
          <RadioButton value="0">普通活动</RadioButton>
          {/*<RadioButton value="1">注册活动</RadioButton>*/}
        </RadioGroup>
        {/*<Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />*/}
        <Link className={styles.addBtn} to={{ pathname: '/news/addtemplate'}}>新增新闻</Link>
      </div>
    );

    return (
      <Card
        className={styles.listCard}
        bordered={false}
        title="历史活动"
        style={{ marginTop: 24 }}
        bodyStyle={{ padding: '0 0px 0px 0px' }}
        extra={extraContent}
      >
        <Table
          columns={columns}
          // rowSelection={{onSelect:(record, selected, selectedRows, nativeEvent)=>{
          //     alert(record+selected+selectedRows+nativeEvent)
          //   }}}
          rowClassName={(record, index) => {
            return record.isonline == '1' ? styles.online : styles.offline;
          }}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${total} 条`,
          }}
          dataSource={this.props.newsList}
        />
      </Card>
    );
  }
}
